<template>
    <view class="upload-proof tn-safe-area-inset-bottom">
        <tn-navbar z-index="1" index-url="/pages/mine/order/buyerOrder" fixed :bottom-shadow="false">上传凭证</tn-navbar>

        <view class="upload-proof-content">
            <tn-image-upload ref="uploadRef" :limit="1" :header="header" :action="action" :form-data="formData"
                @success="uploadSuccess"></tn-image-upload>

            <view class="img-box" v-if="proofImg">
                <img :src="proofImg" />
            </view>
        </view>
        <view class="upload-tools tn-bg-main" @click="upload">
            上传
        </view>
        <tn-toast ref="toast"></tn-toast>
    </view>
</template>
  
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";

import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnButton from "@/tuniao-ui/components/tn-button/src/Button.vue";
import TnImageUpload from "@/tuniao-ui/components/tn-image-upload/src/ImageUpload.vue";
import TnToast from "@/tuniao-ui/components/tn-toast/src/Toast.vue";
import { useUserStore } from "@/tuniao-ui/store/user";
import { api } from "@/config";
import { ResultEnum } from "@/enums/httpEnum";
import { navBack, navPage } from "@/tuniao-ui/utils";
import { uploadProof } from "@/api/purchaseDetail";
import { onLoad } from "@dcloudio/uni-app";

const userStore = useUserStore();

const orderId = ref(0);

const toast = ref<InstanceType<typeof TnToast>>();

// 上传相关参数
const action: string = `${api.base}/buyer/uploader`;
const formData: Record<string, any> = {
    scene: "order-proof",
};
const header: Record<string, any> = {
    Authorization: `Bearer ${userStore.getToken}`,
};
const uploadRef = ref<InstanceType<typeof TnImageUpload>>();
const proofImg = ref();

function uploadSuccess(res: any, list: any) {
    if (res.code === ResultEnum.SUCCESS) {
        proofImg.value = res.result.url;
        uploadRef.value?.clear();

    }
}
function upload() {
    uploadProof({ id: orderId.value, proofUrl: proofImg.value }).then((res) => {
        if (res.code === ResultEnum.SUCCESS) {
            toast.value?.show({
                title: "上传成功",
            });
            setTimeout(function () {
                //navPage("/pages/mine/order/buyerOrder");
                navBack();
            }, 2000);
        }
    });
}
onLoad((options: any) => {
    orderId.value = options.id;
    console.log(orderId.value);
    if (!options.id) {
        //location.href = "#/pages/mine/order/buyerOrder";
        navBack();
    }
})

</script>
  
<style lang="scss" scoped>
body {
    background-color: #fff;
}

.upload-proof-content {
    padding: 20rpx;

    .img-box {
        margin-top: 20rpx;

        img {
            width: 100%;
        }
    }
}

.upload-tools {
    height: 100rpx;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
}
</style>
  